<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .ProvinceCity{ display: flex;}
        .ProvinceCity #province{}
        .ProvinceCity .province .provinceList{
            display: none;
            width: 200px;
            border: 1px solid #5e5e5e;
        }
        .ProvinceCity .province p {
            cursor: pointer;
            position: relative;
            width: 200px;
            height: 30px;
            border: 1px solid #5e5e5e;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
        }
        .ProvinceCity .province p .fs-arrow {
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #000;
            position: absolute;
            top: 12px;
            right: 10px;
            bottom: 0;
            margin: auto;
        }
        .ProvinceCity .province li {
            position: relative;
            width: 200px;
            height: 30px;
            cursor: pointer;
            border-bottom: 1px solid #5e5e5e;
            text-align: center;
            line-height: 30px;
        }
        .ProvinceCity .province textarea {
            cursor: pointer;
        }
        .ProvinceCity .province li input {
            width:18px;
            height:20px;
            z-index: 999;
            position: absolute;
            left: 5px;
            top: 7px;
        }
        .ProvinceCity .province li:hover {
            background-color: #5bc0de;
        }
        .border-ul {
            margin-top: 30px;
            border: 1px solid #5e5e5e;
        }
        .activeCity {
            background-color: #5bc0de;
        }
    </style>
</head>

<body>
<button id="removeBtn">清空</button>
<div class="ProvinceCity select-1">
    <textarea name="textarea" id="ProvinceCityValue-1" cols="50" rows="5"></textarea>
    <div class="province">
        <p class="province-sl">选择<span class="fs-arrow"></span></p>
        <ul class="provinceList" style="overflow:auto; height: 400px"></ul>
    </div>
    <div class="province">
        <ul class="border-ul level"></ul>
    </div>
    <div class="province">
        <ul class="border-ul city"></ul>
    </div>
</div>
<div class="ProvinceCity select-2">
    <textarea name="textarea" id="ProvinceCityValue-2" cols="50" rows="5"></textarea>
    <div class="province">
        <p class="province-sl">选择<span class="fs-arrow"></span></p>
        <ul class="provinceList" style="overflow:auto; height: 400px"></ul>
    </div>
    <div class="province">
        <ul class="border-ul level"></ul>
    </div>
    <div class="province">
        <ul class="border-ul city"></ul>
    </div>
</div>
<div class="ProvinceCity select-3">
    <textarea name="textarea" id="ProvinceCityValue-3" cols="50" rows="5"></textarea>
    <div class="province">
        <p class="province-sl">选择<span class="fs-arrow"></span></p>
        <ul class="provinceList" style="overflow:auto; height: 400px"></ul>
    </div>
    <div class="province">
        <ul class="border-ul level"></ul>
    </div>
    <div class="province">
        <ul class="border-ul city"></ul>
    </div>
</div>
</body>
<script src="./jquery-3.1.1.min.js"></script>
<script src="./city.js"></script>
<script>
    new citylist('ProvinceCityValue-1', 'select-1');
    new citylist('ProvinceCityValue-2', 'select-2');
    new citylist('ProvinceCityValue-3', 'select-3');
</script>
</html>